<template>
  <div desen class="feature_compressedImage_box one_hundred_percent_height">
    <el-row class="one_hundred_percent_height">
      <el-col :span="8" style="padding: 20px; box-sizing: border-box">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="选择图片">
            <el-upload
              class="upload-demo"
              drag
              action=""
              :http-request="onUploadChange"
              :show-file-list="false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                仅支持jpg、jpeg、png图片
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="宽">
            <el-input
              v-model="form.width"
              :disabled="!img"
              @change="(e) => onParamsChange('width')"
              placeholder="请输入内容"
            >
              <template slot="suffix">
                <el-button
                  size="mini"
                  type="success"
                  @click="fixedCanvas('width')"
                  >画布宽</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="高">
            <el-input
              v-model="form.height"
              :disabled="!img"
              @change="(e) => onParamsChange('height')"
              placeholder="请输入内容"
            >
              <template slot="suffix">
                <el-button
                  size="mini"
                  type="success"
                  @click="fixedCanvas('height')"
                  >画布高</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="图片质量">
            <el-input
              v-model="form.quality"
              :disabled="!img"
              placeholder="请输入内容"
            >
              <template slot="suffix">
                <span>只支持0-1之间</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="图片类型">
            <el-radio-group v-model="form.imageType" :disabled="!img">
              <el-radio
                :label="item"
                :value="item"
                v-for="(item, idx) in imageTypeList"
                :key="idx"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否保持宽高比">
            <el-switch v-model="form.keepBase"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="!img" type="primary" @click="exportImage"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col
        :span="16"
        ref="canvasContainer"
        class="canvas_container one_hundred_percent_height"
      >
        <canvas ref="canvas"></canvas>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "compressedImage",
  data() {
    return {
      base: 0,
      canvas: null,
      ctx: null,
      img: null,
      form: {
        width: null,
        height: null,
        keepBase: false,
        imageType: "jpg",
        quality: 0.9,
      },

      imageTypeList: ["jpg", "jpeg", "png"],
    };
  },
  methods: {
    // 导出图片
    exportImage() {
      let canvas = document.createElement("canvas");
      canvas.width = this.form.width;
      canvas.height = this.form.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(this.img, 0, 0, this.form.width, this.form.height);
      canvas.toBlob(
        (blob) => {
          let a = document.createElement("a");
          a.download = "image." + this.form.imageType;
          a.href = URL.createObjectURL(blob);
          a.click();
        },
        "image/" + this.form.imageType,
        this.form.quality
      );
    },
    // 选择画布宽、画布高
    fixedCanvas(params) {
      this.form[params] = this.canvas[params];
      this.onParamsChange(params);
    },
    // 修改宽高
    onParamsChange(params) {
      if (this.form.keepBase) {
        if (params === "width") {
          this.form.height = this.form.width / this.base;
        } else if (params === "height") {
          this.form.width = this.form.height * this.base;
        }
      }
      this.drawCanvas();
    },
    // 清空canvas
    cleanCanvas() {
      this.canvas.width = this.canvas.width;
    },
    // 绘制图片
    drawCanvas() {
      this.cleanCanvas();
      this.ctx.drawImage(this.img, 0, 0, this.form.width, this.form.height);
    },
    // 选择图片
    onUploadChange(e) {
      let file = e.file;
      let imageType = file.type.split("/")[1];
      this.form.imageType = imageType;
      let fr = new FileReader();
      fr.onloadend = (e) => {
        this.img = new Image();
        this.img.onload = () => {
          let width = this.img.width;
          let height = this.img.height;
          this.form.width = width;
          this.form.height = height;

          this.drawCanvas();
          this.base = width / height;
        };
        this.img.src = e.target.result;
      };
      fr.readAsDataURL(file);
    },
    // 初始化canvas
    initCanvas() {
      this.canvas = this.$refs.canvas;

      this.ctx = this.canvas.getContext("2d");

      this.canvas.width = parseInt(
        getComputedStyle(this.$refs.canvasContainer.$el).width
      );
      this.canvas.height = parseInt(
        getComputedStyle(this.$refs.canvasContainer.$el).height
      );
    },
  },
  mounted() {
    this.initCanvas();
  },
};
</script>
<style scoped lang="scss">
.feature_compressedImage_box {
  .canvas_container {
    border: 1px solid #e0d1d1;
    box-sizing: border-box;
  }
}
</style>